<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="js/swiper.min.css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/baiduTemplate.js"></script>
</head>
<body>
<div id="mengban">
    <div id="bgdiv"><div class="onediv"><span id="hd">欢迎登陆360同城帮</span> <span id="closepage">X</span></div><p></p>
    <p id="user">账 号：<input type="text"></p> <br>
    <p id="password">密 码：<input type="text"></p>
    <p id="zidong"><input type="checkbox" id="choose">下次自动登录</p>
    <p id="anniu"><input type="button" value="立即登录" id="audio"></p>
    <p id="qtdl">其它账号登录：<a href=""><img src="images/dl/add_15.png" alt=""></a><a href=""><img src="images/dl/add_17.png" alt=""></a><a href=""><img src="images/dl/add_19.png" alt=""></a><a href=""><img src="images/dl/add_21.png" alt=""></a></p>
    <div id="footmm"><a href="">注册新账号</a> | <a href="">忘记密码</a></div>
    </div>
</div>
<img src="images/erweima.png" id="zixun">
    <header>
        <p>北京<a href="#">[切换城市]</a> | <a href="#">同城帮首页</a></p>
        <p id="headerright"><a href="#" id="denglu">登录</a> |
            <a href="#">注册</a> |
            <a href="#">我的订单</a> |
            <a href="#">在线客服</a> <span style="font-size: 12px">（9:00-12:00）</span>|
            <a href="#">客户服务</a> |
            <a href="#">论坛</a> |
            <a href="#" style="color:red">投诉建议</a></p>
    </header>
    <div id="nav">
        <img src="images/35.png" alt="">
        <p>
            <a href="#">二手优品</a>
            <a href="#">手机回收</a>
            <a href="#">手机维修</a>
            <a href="#">电脑维修</a>
            <a href="#">以旧换新</a>
            <a href="#">手机租用</a>
        </p>
    </div>
    <div class="navimg">
        <div class="swiper-container ">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/5.png" alt=""></div>
                <div class="swiper-slide"><img src="images/6.png" alt=""></div>
                <div class="swiper-slide"><img src="images/13.jpg" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>

        </div>
        <ul class="choose">
            <li><img src="images/2_03.png" alt=""><span>修手机/pad</span></li>
            <li><img src="images/2_06.png" alt=""><span>修电脑</span></li>
            <li><img src="images/2_08.png" alt=""><span>卖手机/电脑</span></li>
            <li><img src="images/2_10.png" alt=""><span>买二手手机</span></li>
        </ul>
    </div>
    <div class="topnav">
        <img src="images/2.jpg" alt=""><img src="images/10.jpg" alt=""><img src="images/14.jpg" alt=""><img src="images/15.png" alt="">
    </div>
    <h2 class="passge">热门手机回收 <span><a href="#">查看更多</a><img src="images/1_03.png" alt=""></span></h2>
    <div class="middlenav dest">
        <img src="images/4_03.png" alt="">
        <div></div>
    </div>
    <h2 class="passge">优品精选 <span><a href="#">查看更多</a><img src="images/1_03.png" alt=""></span></h2>
    <div class="middlenav dist">
        <img src="images/4_06.png" alt="">
       <div>
       </div>
    </div>
    <h2 class="passge">到店维修 <span><a href="#">查看更多</a><img src="images/1_03.png" alt=""></span></h2>
    <div class="search">
        <select name="" id="" class="chooseaudio">
            <option>北京</option>
        </select>
        <select name="" id="" class="chooseaudio">
            <option>选择县区</option>
        </select>
        <input type="text" id="searchtext" placeholder="输入您的位置，搜索附近的商家"><input type="button" value="搜索" id="searchbtn">
    </div>
    <div class="shoplist">
        <a href="" style="border-right: 1px solid gray">默认排序</a><a href="#">按成交量</a><a href="#">按人气</a><div id="duoxuan"><input type="checkbox">先行赔付</div>
        <a href="#" id="map">地图模式</a>
    </div>
<div class="listshop">
    <div class="listitem"><img src="images/8.gif" alt=""><div class="content"><h3><a href="#">顺通电脑维修</a><span> &nbsp;&nbsp;&nbsp;&nbsp;店铺等级:**</span> <i>￥先行赔付</i></h3>
        <div class="liststore">主营：电脑维修，电脑周边配件，系统维护，网络安装。<i>同城帮认证</i></div>
        <div class="laststore">地址：北京通州区瑞都国际南区12号楼底商12-2<strong>人气：<span>11910</span>次浏览</strong></div>
    </div></div>
    <div class="listitem"><img src="images/8.gif" alt=""><div class="content"><h3><a href="#">顺通电脑维修</a><span> &nbsp;&nbsp;&nbsp;&nbsp;店铺等级:**</span> <i>￥先行赔付</i></h3>
        <div class="liststore">主营：电脑维修，电脑周边配件，系统维护，网络安装。<i>同城帮认证</i></div>
        <div class="laststore">地址：北京通州区瑞都国际南区12号楼底商12-2<strong>人气：<span>11910</span>次浏览</strong></div>
    </div></div>
    <div class="listitem"><img src="images/8.gif" alt=""><div class="content"><h3><a href="#">顺通电脑维修</a><span> &nbsp;&nbsp;&nbsp;&nbsp;店铺等级:*****</span> <i>￥先行赔付</i></h3>
        <div class="liststore">主营：电脑维修，电脑周边配件，系统维护，网络安装。<i>同城帮认证</i></div>
        <div class="laststore">地址：北京通州区瑞都国际南区12号楼底商12-2<strong>人气：<span>11910</span>次浏览</strong></div>
    </div></div>
    <div class="listitem"><img src="images/8.gif" alt=""><div class="content"><h3><a href="#">顺通电脑维修</a><span> &nbsp;&nbsp;&nbsp;&nbsp;店铺等级:****</span> <i>￥先行赔付</i></h3>
        <div class="liststore">主营：电脑维修，电脑周边配件，系统维护，网络安装。<i>同城帮认证</i></div>
        <div class="laststore">地址：北京通州区瑞都国际南区12号楼底商12-2<strong>人气：<span>11910</span>次浏览</strong></div>
    </div></div>
    <div class="listitem"><img src="images/8.gif" alt=""><div class="content"><h3><a href="#">顺通电脑维修</a><span> &nbsp;&nbsp;&nbsp;&nbsp;店铺等级:**</span> <i>￥先行赔付</i></h3>
        <div class="liststore">主营：电脑维修，电脑周边配件，系统维护，网络安装。<i>同城帮认证</i></div>
        <div class="laststore">地址：北京通州区瑞都国际南区12号楼底商12-2 <strong>人气：<span>11910</span>次浏览</strong></div>
    </div></div>
</div>
<div class="leftshop">
    <h3>商家好评榜</h3>
    <div class="leftshopitem"><div class="leftshopnum">①</div>
        <img src="images/30.jpg" alt=""><a href="">联金城维修中心</a><p></p>
    </div>
    <div class="leftshopitem"><div class="leftshopnum">②</div>
        <img src="images/30.jpg" alt=""><a href="">联金城维修中心</a><p>121683条评论</p></div>
    <div class="leftshopitem"><div class="leftshopnum">③</div>
        <img src="images/30.jpg" alt=""><a href="">联金城维修中心</a><p>121683条评论</p></div>
    <div class="leftshopitem"><div class="leftshopnum">④</div>
        <img src="images/30.jpg" alt=""><a href="">联金城维修中心</a><p>121683条评论</p></div>
    <div class="leftshopitem"><div class="leftshopnum">⑤</div>
        <img src="images/30.jpg" alt=""><a href="">联金城维修中心</a><p>121683条评论</p></div>
    <div class="leftshopitem"><div class="leftshopnum">⑥</div>
        <img src="images/30.jpg" alt=""><a href="">联金城维修中心</a><p>121683条评论</p></div>
    <div class="leftshopitem"><div class="leftshopnum">⑦</div>
        <img src="images/30.jpg" alt=""><a href="">联金城维修中心</a><p>121683条评论</p></div>
</div>
    <div class="footpage" >
<div class="pages">
    <a href="#" style="margin-left: 13%;background:orange">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#" style="width:88px;">下一页</a>
</div>
    </div>
    <div id="bottomDiv">
        <ul id="bottom">
            <li class="bottomLi">
                <ul class="bottomUl">
                    <li><img src="images/38.png" alt=""></li>
                    <li>
                        <h4>购物指南</h4>
                        <p><a href="#">购物流程</a></p>
                        <p><a href="#">用户注册</a></p>
                        <p><a href="#">帮助文档</a></p>
                    </li>
                </ul>
            </li>
            <li class="bottomLi">
                <ul class="bottomUl">
                    <li><img src="images/38.png" alt=""></li>
                    <li>
                        <h4>支付方式</h4>
                        <p><a href="#">在线支付</a></p>
                        <p><a href="#">当面付款</a></p>
                    </li>
                </ul>
            </li>
            <li class="bottomLi">
                <ul class="bottomUl">
                    <li><img src="images/38.png" alt=""></li>
                    <li>
                        <h4>售后服务</h4>
                        <p><a href="#">投诉建议</a></p>
                    </li>
                </ul>
            </li>
            <li class="bottomLi">
                <ul class="bottomUl">
                    <li><img src="images/38.png" alt=""></li>
                    <li>
                        <h4>特色服务</h4>
                        <p><a href="#">360担保支付</a></p>
                    </li>
                </ul>
            </li>
            <li class="bottomLi">
                <ul class="bottomUl">
                    <li><img src="images/38.png" alt=""></li>
                    <li>
                        <h4>商家合作</h4>
                        <p><a href="#" style="color:cornflowerblue">加盟同城帮</a></p>
                        <p><a href="#">新闻采访/跨界合作</a></p>
                    </li>
                </ul>
            </li>
        </ul>
        <div id="bottomWord">
            <p>客服电话：4000-399-360 / 010-53767360 &nbsp;&nbsp;&nbsp;<a href="#">投诉建议</a> <a href="#">&nbsp;&nbsp;&nbsp;网站地图</a></p>
            <p>Copyright © 2005-2017  360.CN  All Rights Reserved  360安全中心</p>
            <p><a href="#">京ICP备08010314号-19</a> &nbsp;&nbsp;&nbsp;京公网安备110000000006号</p>
        </div>
    </div>
</body>
<script type="text/javascript" src="js/swiper.min.js"></script>
    <script>
        var mySwiper= new Swiper('.swiper-container',{
            direction:"horizontal",
            loop:true,
            autoplay:3000,
            pagination:".swiper-pagination"
        });
        $("#denglu").click(function(){
            $("#mengban").css("display","block");
        });
        $("#closepage").click(function(){
            $("#mengban").css("display","none");
        })
        $.get("http://localhost:2222/data/hot.json",function(data){
            $(".dest div").html(baidu.template("iphone",data))
        } )
        $.get("http://localhost:2222/data/hot2.json",function(data){
            $(".dist div").html(baidu.template("iphone1",data))
        } )
    </script>
<script type="text/html" id="iphone">
        <%for(var i=0;i<result.length;i++){%>
              <a href="#" ><img src=<%=result[i].img_url%> </a>
         <%}%>


</script>
<script type="text/html" id="iphone1">
    <%for(var i=0;i<result.length;i++){%>
    <a href="#" ><img src=<%=result[i].thum_img.big%> </a>
    <%}%>

</script>

</html>